<template>
  <div>
    <!--    查询功能-->
    <div style="margin-bottom: 5px">
      <!-- 下拉框父类型查询 -->
      <el-select
        v-model="queryPostParams.ptypeId"
        placeholder="请选择父类型"
        readonly
      >
        <el-option
          v-for="item in parentPostTypeAll"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <!--    下拉框子类型查询-->
      <el-select
        v-model="queryPostParams.typeId"
        placeholder="请选择子类型"
        readonly
      >
        <el-option
          v-for="item in querySonsType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <!--      查询按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="queryPsot"
        >查询</el-button
      >
      <!--      重置按钮-->
      <el-button type="success" @click="resetParam">重置</el-button>
    </div>

    <!--    列表展示-->
    <el-table
      :data="postAll"
      :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }"
    >
      <el-table-column prop="id" label="id" width="200" header-align="center">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名称"
        width="80"
      ></el-table-column>
      <el-table-column prop="parentTypeId" label="帖子父类型" width="100">
        <template slot-scope="scope">
          {{ getPostParentTypeName(scope.row.parentTypeId) }}
        </template>
      </el-table-column>
      <el-table-column prop="typeId" label="帖子类型" width="100">
        <template slot-scope="scope">
          {{ getPostTypeName(scope.row.parentTypeId, scope.row.typeId) }}
        </template>
      </el-table-column>
      <el-table-column label="图片" width="150" header-align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 150px; height: 50px"
            :src="scope.row.image"
            fit="contain"
            :preview-src-list="[scope.row.postImage]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        width="200"
        header-align="center"
        ><template slot-scope="scope">
          <el-button @click="inDetail(scope.row.content)"
            >点击查看详细</el-button
          >
        </template></el-table-column
      >
      <el-table-column prop="isPrivate" label="是否公开" width="80">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.gender === false ? 'success' : 'danger'"
            disable-transitions
            >{{ scope.row.gender === false ? "已公开" : "未公开" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="140">
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="del(scope.row.id)"
            style="margin-left: 5px"
          >
            <el-button slot="reference" size="small" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页  -->
    <div class="pagination-wrapper">
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="帖子内容"
      :visible.sync="inDetailDialogVisible"
      width="50%"
      center
    >
      <div v-html="postDetails"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="inDetailDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPost, delPost } from "@/api/q&aService/postManagement";
import { firstLevelPostQuery } from "@/api/q&aService/postTypeManagement/firstLevelPostQuery";
import { queryParentId } from "@/api/q&aService/postTypeManagement/queryParentId";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "registrationManagement",
  data() {
    return {
      postAll: [], //所有帖子
      parentPostTypeAll: [], //父类型
      postSonType: [], //子类型
      querySonsType: [], //下拉框的子类型
      queryPostParams: {
        ptypeId: "", //搜索的父类型id
        typeId: "", //搜索的子类型id
      },
      id: "",
      page: 1,
      limit: 5,
      total: 0,
      inDetailDialogVisible: false,
      postDetails: "",
    };
  },
  watch: {
    // 监视userInfoForm.collegeId的变化
    "queryPostParams.ptypeId": {
      handler(newVal) {
        // 当collegeId变化时，调用majorData方法
        if (newVal == "") {
          return;
        }
        this.queryPostParams.typeId = "";
        this.querySonType(newVal);
      },
    },
  },
  methods: {
        //点击查看详细
        inDetail(data) {
      this.postDetails = data;
      this.inDetailDialogVisible = true;
    },
    //删除
    del(id) {
      delPost(id).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.queryPsot();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.page = 1;
      this.limit = val;
      this.queryPsot();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.queryPsot();
    },
    resetParam() {
      this.queryPostParams.ptypeId = "";
      this.queryPostParams.typeId = "";
      this.queryPsot();
    },
    //查询所有帖子
    queryPsot() {
      getPost(this.page, this.limit, this.queryPostParams).then((res) => {
        if (res.code === 20000) {
          this.total = res.data.page.total;
          this.postAll = res.data.page.records;
        }
      });
    },
    //查询所有帖子父类型
    queryParentType() {
      firstLevelPostQuery().then((res) => {
        this.parentPostTypeAll = res.data.parentList;
        this.parentPostTypeAll.forEach((item) => {
          queryParentId(item.id).then((res) => {
            if (res.code == 20000) {
              this.postSonType.push(...res.data.sonList);
              console.log(this.postSonType);
            } else {
              this.$message.error("查询失败，请稍后再试");
            }
          });
        });
      });
    },
    //查找父类型的名称
    getPostParentTypeName(parentTypeId) {
      const parentType = this.parentPostTypeAll.find(
        (c) => c.id === parentTypeId
      );
      return parentType ? parentType.name : "未选择父类型";
    },
    //查找子类型名称
    getPostTypeName(parentTypeId, typeId) {
      const postType = this.postSonType.find((c) => c.id === typeId);
      return postType ? postType.name : "未选择子类型";
    },
    //下拉框查询的子类型
    querySonType() {
      queryParentId(this.queryPostParams.ptypeId).then((res) => {
        this.querySonsType = res.data.sonList;
      });
    },
  },
  mounted() {
    this.queryPsot();
    this.queryParentType();
  },
};
</script>

<style scoped></style>